<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基层AI辅助诊疗系统 - 登录</title>
    <style>
        /* 重置样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        /* 基本样式 */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
            background-color: #F9F9F9;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #1A1A1A;
        }
        
        /* 登录容器 */
        .login-container {
            width: 100%;
            max-width: 420px;
            background-color: #FFFFFF;
            border-radius: 2px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            padding: 32px 24px;
            text-align: center;
        }
        
        /* Logo区域 */
        .login-logo {
            margin-bottom: 24px;
        }
        
        .login-logo-img {
            width: 120px;
            height: 64px;
            margin-bottom: 16px;
            display: inline-block;
        }
        
        .login-title {
            font-size: 20px;
            font-weight: 600;
            color: #1A1A1A;
            margin-bottom: 8px;
        }
        
        /* 表单样式 */
        .login-form {
            text-align: left;
        }
        
        .form-item {
            margin-bottom: 16px;
        }
        
        .form-item-label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
            color: #4D4D4D;
        }
        
        .input-wrapper {
            position: relative;
        }
        
        .input-icon {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #767676;
            width: 16px;
            height: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .form-input {
            width: 100%;
            height: 36px;
            padding: 8px 12px 8px 36px;
            border: 1px solid #E0E0E0;
            border-radius: 2px;
            font-size: 14px;
            transition: all 0.3s;
        }
        
        .form-input:hover, .form-input:focus {
            border-color: #0F6CBD;
            outline: none;
        }
        
        .form-input:focus {
            box-shadow: 0 0 0 2px rgba(15, 108, 189, 0.1);
        }
        
        /* 忘记密码链接 */
        .login-form-forgot {
            float: right;
            color: #0F6CBD;
            font-size: 14px;
            text-decoration: none;
        }
        
        .login-form-forgot:hover {
            color: #0A4F8D;
            text-decoration: underline;
        }
        
        /* 登录按钮 */
        .login-form-button {
            width: 100%;
            height: 36px;
            background-color: #0F6CBD;
            color: #FFFFFF;
            border: none;
            border-radius: 2px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.3s;
            margin-top: 16px;
        }
        
        .login-form-button:hover {
            background-color: #0A4F8D;
        }
        
        /* 页脚 */
        .login-footer {
            margin-top: 32px;
            font-size: 12px;
            color: #767676;
        }
        
        /* 忘记密码弹窗 */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }
        
        .modal {
            background-color: #FFFFFF;
            width: 420px;
            border-radius: 2px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        .modal-header {
            padding: 16px 24px;
            border-bottom: 1px solid #F0F0F0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .modal-title {
            font-size: 16px;
            font-weight: 600;
            color: #1A1A1A;
        }
        
        .modal-close {
            font-size: 18px;
            color: #767676;
            background: none;
            border: none;
            cursor: pointer;
        }
        
        .modal-body {
            padding: 24px;
        }
        
        .modal-description {
            margin-bottom: 16px;
            color: #4D4D4D;
            font-size: 14px;
        }
        
        .modal-footer {
            padding: 16px 24px;
            border-top: 1px solid #F0F0F0;
            text-align: right;
        }
        
        .btn {
            padding: 0 16px;
            height: 32px;
            border-radius: 2px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
            border: 1px solid transparent;
        }
        
        .btn-default {
            background-color: #FFFFFF;
            border-color: #D9D9D9;
            color: #4D4D4D;
            margin-right: 8px;
        }
        
        .btn-default:hover {
            border-color: #0F6CBD;
            color: #0F6CBD;
        }
        
        .btn-primary {
            background-color: #0F6CBD;
            color: #FFFFFF;
        }
        
        .btn-primary:hover {
            background-color: #0A4F8D;
        }
        
        /* 验证码按钮样式在登录按钮样式基础上进行覆盖 */
        
        /* 响应式调整 */
        @media (max-width: 576px) {
            .login-container {
                max-width: 100%;
                margin: 0 16px;
                padding: 24px 16px;
            }
            
            .modal {
                width: calc(100% - 32px);
                margin: 0 16px;
            }
        }
        
        /* 错误提示 */
        .error-message {
            color: #D13438;
            font-size: 12px;
            margin-top: 4px;
            display: none;
        }
        
        .input-error {
            border-color: #D13438 !important;
        }
        
        .input-error:focus {
            box-shadow: 0 0 0 2px rgba(209, 52, 56, 0.1) !important;
        }
        
        /* 图标样式 */
        .icon-user, .icon-lock, .icon-mobile, .icon-safety {
            width: 16px;
            height: 16px;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            fill: none;
        }
    </style>
</head>
<body>
    <!-- 登录页面容器 -->
    <div class="login-container">
        <div class="login-logo">
            <!-- 医疗十字标志图标 (Font Awesome - plus-square-medical) -->
            <svg class="login-logo-img" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
                <path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-32 252c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92H92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z" fill="#0F6CBD"/>
            </svg>
            <div class="login-title">基层AI辅助诊断系统</div>
        </div>
        
        <form class="login-form" id="loginForm">
            <div class="form-item">
                <div class="input-wrapper">
                    <div class="input-icon">
                        <svg class="icon-user" viewBox="0 0 24 24">
                            <circle cx="12" cy="8" r="4"></circle>
                            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                        </svg>
                    </div>
                    <input type="text" id="username" class="form-input" placeholder="请输入用户名" autocomplete="username">
                    <div class="error-message" id="usernameError"></div>
                </div>
            </div>
            
            <div class="form-item">
                <div class="input-wrapper">
                    <div class="input-icon">
                        <svg class="icon-lock" viewBox="0 0 24 24">
                            <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                            <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                        </svg>
                    </div>
                    <input type="password" id="password" class="form-input" placeholder="请输入密码" autocomplete="current-password">
                    <div class="error-message" id="passwordError"></div>
                </div>
            </div>
            
            <div class="form-item">
                <a href="javascript:void(0)" class="login-form-forgot" id="forgotPasswordBtn">忘记密码</a>
            </div>
            
            <div class="form-item">
                <button type="submit" class="login-form-button" id="loginBtn">登录</button>
            </div>
        </form>
        
        <div class="login-footer">
            © 2024 基层AI辅助诊断系统
        </div>
    </div>
    
    <!-- 忘记密码弹窗 -->
    <div class="modal-overlay" id="forgotPasswordModal">
        <div class="modal">
            <div class="modal-header">
                <div class="modal-title">忘记密码</div>
                <button class="modal-close" id="closeModalBtn">&times;</button>
            </div>
            
            <div class="modal-body">
                <form id="resetPasswordForm">
                    <div class="form-item">
                        <div class="input-wrapper">
                            <div class="input-icon">
                                <svg class="icon-user" viewBox="0 0 24 24">
                                    <circle cx="12" cy="8" r="4"></circle>
                                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                                </svg>
                            </div>
                            <input type="text" id="resetUsername" class="form-input" placeholder="请输入用户名">
                            <div class="error-message" id="resetUsernameError"></div>
                        </div>
                    </div>
                    
                    <div class="form-item">
                        <div class="input-wrapper">
                            <div class="input-icon">
                                <svg class="icon-mobile" viewBox="0 0 24 24">
                                    <rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect>
                                    <line x1="12" y1="18" x2="12" y2="18"></line>
                                </svg>
                            </div>
                            <input type="text" id="phoneNumber" class="form-input" placeholder="请输入手机号">
                            <div class="error-message" id="phoneNumberError"></div>
                        </div>
                    </div>
                    
                    <div class="form-item">
                        <div style="display: flex; gap: 16px;">
                            <div style="width: 50%;">
                                <input type="text" id="verificationCode" class="form-input" placeholder="请输入验证码">
                                <div class="error-message" id="verificationCodeError"></div>
                            </div>
                            <div style="width: 50%;">
                                <button type="button" id="getCodeBtn" class="login-form-button" style="margin-top: 0; background-color: #FFFFFF; color: #0F6CBD; border: 1px solid #0F6CBD;">获取验证码</button>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-item">
                        <div class="input-wrapper">
                            <div class="input-icon">
                                <svg class="icon-lock" viewBox="0 0 24 24">
                                    <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                                    <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                                </svg>
                            </div>
                            <input type="password" id="newPassword" class="form-input" placeholder="请输入新密码">
                            <div class="error-message" id="newPasswordError"></div>
                        </div>
                        <div style="font-size: 12px; color: #767676; margin-top: 4px;">密码需包含字母和数字，长度为6-20个字符</div>
                    </div>
                    
                    <div class="form-item">
                        <div class="input-wrapper">
                            <div class="input-icon">
                                <svg class="icon-lock" viewBox="0 0 24 24">
                                    <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                                    <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                                </svg>
                            </div>
                            <input type="password" id="confirmPassword" class="form-input" placeholder="请再次输入新密码">
                            <div class="error-message" id="confirmPasswordError"></div>
                        </div>
                    </div>
                </form>
            </div>
            
            <div class="modal-footer">
                <button class="btn btn-default" id="cancelBtn">取消</button>
                <button class="btn btn-primary" id="resetPasswordBtn">重置密码</button>
            </div>
        </div>
    </div>
    
    <script>
        // 登录表单验证
        document.getElementById('loginForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            let isValid = true;
            
            // 验证用户名
            if (!username) {
                showError('username', '请输入用户名');
                isValid = false;
            } else if (username.length < 3 || username.length > 20) {
                showError('username', '用户名长度为3-20个字符');
                isValid = false;
            } else {
                hideError('username');
            }
            
            // 验证密码
            if (!password) {
                showError('password', '请输入密码');
                isValid = false;
            } else if (password.length < 6 || password.length > 20) {
                showError('password', '密码长度为6-20个字符');
                isValid = false;
            } else {
                hideError('password');
            }
            
            // 如果验证通过，模拟登录
            if (isValid) {
                const loginBtn = document.getElementById('loginBtn');
                loginBtn.textContent = '登录中...';
                loginBtn.disabled = true;
                
                // 模拟登录请求
                setTimeout(() => {
                    if (username === 'admin' && password === 'admin123') {
                        // 登录成功
                        showMessage('登录成功', '欢迎回到基层AI辅助诊疗系统', 'success');
                        
                        // 模拟跳转
                        setTimeout(() => {
                            window.location.href = '#/dashboard';
                        }, 1500);
                    } else {
                        // 登录失败
                        showMessage('登录失败', '用户名或密码错误，请重试', 'error');
                        loginBtn.textContent = '登录';
                        loginBtn.disabled = false;
                    }
                }, 1500);
            }
        });
        
        // 忘记密码弹窗
        document.getElementById('forgotPasswordBtn').addEventListener('click', function() {
            document.getElementById('forgotPasswordModal').style.display = 'flex';
        });
        
        // 关闭弹窗
        document.getElementById('closeModalBtn').addEventListener('click', closeModal);
        document.getElementById('cancelBtn').addEventListener('click', closeModal);
        
        function closeModal() {
            document.getElementById('forgotPasswordModal').style.display = 'none';
            document.getElementById('resetPasswordForm').reset();
            hideAllErrors();
        }
        
        // 获取验证码
        let countdown = 60;
        let timer = null;
        
        document.getElementById('getCodeBtn').addEventListener('click', function() {
            const username = document.getElementById('resetUsername').value;
            const phoneNumber = document.getElementById('phoneNumber').value;
            let isValid = true;
            
            // 验证用户名
            if (!username) {
                showError('resetUsername', '请输入用户名');
                isValid = false;
            } else {
                hideError('resetUsername');
            }
            
            // 验证手机号
            if (!phoneNumber) {
                showError('phoneNumber', '请输入手机号');
                isValid = false;
            } else if (!/^1[3-9]\d{9}$/.test(phoneNumber)) {
                showError('phoneNumber', '请输入正确的手机号');
                isValid = false;
            } else {
                hideError('phoneNumber');
            }
            
            if (isValid) {
                // 禁用按钮并开始倒计时
                const codeBtn = document.getElementById('getCodeBtn');
                codeBtn.disabled = true;
                codeBtn.textContent = `${countdown}秒后重新获取`;
                codeBtn.style.backgroundColor = '#F5F5F5';
                codeBtn.style.borderColor = '#D9D9D9';
                codeBtn.style.color = '#A6A6A6';
                
                timer = setInterval(() => {
                    countdown--;
                    codeBtn.textContent = `${countdown}秒后重新获取`;
                    
                    if (countdown <= 0) {
                        clearInterval(timer);
                        codeBtn.disabled = false;
                        codeBtn.textContent = '获取验证码';
                        codeBtn.style.backgroundColor = '#FFFFFF';
                        codeBtn.style.borderColor = '#0F6CBD';
                        codeBtn.style.color = '#0F6CBD';
                        countdown = 60;
                    }
                }, 1000);
                
                // 模拟发送验证码
                showMessage('验证码已发送', `验证码已发送至手机号 ${phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')}`, 'success');
            }
        });
        
        // 重置密码
        document.getElementById('resetPasswordBtn').addEventListener('click', function() {
            const username = document.getElementById('resetUsername').value;
            const phoneNumber = document.getElementById('phoneNumber').value;
            const verificationCode = document.getElementById('verificationCode').value;
            const newPassword = document.getElementById('newPassword').value;
            const confirmPassword = document.getElementById('confirmPassword').value;
            let isValid = true;
            
            // 验证用户名
            if (!username) {
                showError('resetUsername', '请输入用户名');
                isValid = false;
            } else {
                hideError('resetUsername');
            }
            
            // 验证手机号
            if (!phoneNumber) {
                showError('phoneNumber', '请输入手机号');
                isValid = false;
            } else if (!/^1[3-9]\d{9}$/.test(phoneNumber)) {
                showError('phoneNumber', '请输入正确的手机号');
                isValid = false;
            } else {
                hideError('phoneNumber');
            }
            
            // 验证验证码
            if (!verificationCode) {
                showError('verificationCode', '请输入验证码');
                isValid = false;
            } else if (!/^\d{6}$/.test(verificationCode)) {
                showError('verificationCode', '验证码为6位数字');
                isValid = false;
            } else {
                hideError('verificationCode');
            }
            
            // 验证新密码
            if (!newPassword) {
                showError('newPassword', '请输入新密码');
                isValid = false;
            } else if (newPassword.length < 6 || newPassword.length > 20) {
                showError('newPassword', '密码长度为6-20个字符');
                isValid = false;
            } else if (!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,20}$/.test(newPassword)) {
                showError('newPassword', '密码需包含字母和数字');
                isValid = false;
            } else {
                hideError('newPassword');
            }
            
            // 验证确认密码
            if (!confirmPassword) {
                showError('confirmPassword', '请确认密码');
                isValid = false;
            } else if (confirmPassword !== newPassword) {
                showError('confirmPassword', '两次输入的密码不一致');
                isValid = false;
            } else {
                hideError('confirmPassword');
            }
            
            if (isValid) {
                const resetBtn = document.getElementById('resetPasswordBtn');
                resetBtn.textContent = '处理中...';
                resetBtn.disabled = true;
                
                // 模拟重置密码请求
                setTimeout(() => {
                    showMessage('密码重置成功', '您的密码已重置，请使用新密码登录系统', 'success');
                    
                    resetBtn.textContent = '重置密码';
                    resetBtn.disabled = false;
                    
                    // 关闭弹窗并清空表单
                    closeModal();
                }, 1500);
            }
        });
        
        // 显示错误信息
        function showError(fieldId, message) {
            const field = document.getElementById(fieldId);
            const errorElement = document.getElementById(fieldId + 'Error');
            
            field.classList.add('input-error');
            errorElement.textContent = message;
            errorElement.style.display = 'block';
        }
        
        // 隐藏错误信息
        function hideError(fieldId) {
            const field = document.getElementById(fieldId);
            const errorElement = document.getElementById(fieldId + 'Error');
            
            field.classList.remove('input-error');
            errorElement.style.display = 'none';
        }
        
        // 隐藏所有错误信息
        function hideAllErrors() {
            const errorElements = document.querySelectorAll('.error-message');
            const inputElements = document.querySelectorAll('.form-input');
            
            errorElements.forEach(element => {
                element.style.display = 'none';
            });
            
            inputElements.forEach(element => {
                element.classList.remove('input-error');
            });
        }
        
        // 显示消息提示
        function showMessage(title, message, type) {
            // 创建消息元素
            const messageElement = document.createElement('div');
            messageElement.style.position = 'fixed';
            messageElement.style.top = '16px';
            messageElement.style.right = '16px';
            messageElement.style.padding = '12px 16px';
            messageElement.style.borderRadius = '2px';
            messageElement.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.15)';
            messageElement.style.backgroundColor = '#FFFFFF';
            messageElement.style.width = '320px';
            messageElement.style.zIndex = '2000';
            messageElement.style.transition = 'all 0.3s';
            
            // 根据类型设置样式
            if (type === 'success') {
                messageElement.style.borderLeft = '4px solid #0F8A5F';
            } else if (type === 'error') {
                messageElement.style.borderLeft = '4px solid #D13438';
            } else if (type === 'warning') {
                messageElement.style.borderLeft = '4px solid #F59337';
            } else {
                messageElement.style.borderLeft = '4px solid #0F6CBD';
            }
            
            // 设置内容
            messageElement.innerHTML = `
                <div style="font-weight: 600; font-size: 14px; margin-bottom: 4px;">${title}</div>
                <div style="font-size: 12px; color: #4D4D4D;">${message}</div>
            `;
            
            // 添加到页面
            document.body.appendChild(messageElement);
            
            // 3秒后自动关闭
            setTimeout(() => {
                messageElement.style.opacity = '0';
                setTimeout(() => {
                    document.body.removeChild(messageElement);
                }, 300);
            }, 3000);
        }
    </script>
</body>
</html>